<!DOCTYPE html>
<html>

<head>
  <title data-i18n-content="title_options_page">Fast Jump Options</title>
</head>

<body>
  <div id="add_hotkey_item">
    <div class="add_hotkey_item_title">
      <span data-i18n-content="title_add_hotkey_item">add new hotkey:</span>
    </div>
    <input type="text" class="operation_name" autofocus
        placeholder="give this operation a name"
        data-i18n-placeholder="item_name_placeholder">
    <input type="text" class="hotkey_set" placeholder="press keys here"
        data-i18n-placeholder="item_hotkeyset_placeholder">
    <input type="checkbox" class="valid_when_visible" name="valid_condition" checked>
    <label for="valid_condition"
        data-i18n-content="checkbox_hotkey_valid_when_visible">
      valid when visible
    </label>
    <select class="operation">
      <option value="click" data-i18n-content="option_hotkeyset_operation_click"
          autofocus>
        click
      </option>
      <option value="focus" data-i18n-content="option_hotkeyset_operation_focus">
        focus
      </option>
    </select>
    <button class="save" data-i18n-content="button_save">save</button>
    <button class="clear" data-i18n-content="button_clear">clear</button>
    <div class="warning"></div>
  </div>

  <div id="saved_hotkey_container"></div>

  <template id="domain_card_template">
    <div class="domain_card_title">
      <img class="favicon">
      <span class="domain_name"></span>
    </div>
    <div class="domain_card_items">
    </div>
  </template>

  <template id="domain_card_item_template">
    <input type="text" class="operation_name"
        placeholder="give this operation a name"
        data-i18n-placeholder="item_name_placeholder">
    <input type="text" class="hotkey_set" placeholder="press keys here"
        data-i18n-placeholder="item_hotkeyset_placeholder">
    <input type="checkbox" class="valid_when_visible" name="valid_condition">
    <label for="valid_condition"
        data-i18n-content="checkbox_hotkey_valid_when_visible">
      valid when visible
    </label>
    <select class="operation">
      <option value="click" data-i18n-content="option_hotkeyset_operation_click">
        click
      </option>
      <option value="focus" data-i18n-content="option_hotkeyset_operation_focus">
        focus
      </option>
    </select>
    <button class="save" data-i18n-content="button_save">save</button>
    <button class="clear" data-i18n-content="button_clear">clear</button>
    <button class="delete" data-i18n-content="button_delete">delete</button>
    <div class="warning"></div>
  </template>

  <div id="other_options">
    <div class="checkbox">
      <input type="checkbox" class="nav_top" name="nav_top">
      <label for="nav_top" data-i18n-content="checkbox_navigate_to_top">
        navigate to top
      </label>
    </div>
    <div class="checkbox">
      <input type="checkbox" class="nav_bottom" name="nav_bottom">
      <label for="nav_bottom" data-i18n-content="checkbox_navigate_to_bottom">
        navigate to bottom
      </label>
    </div>
    <button class="delete-all" data-i18n-content="button_delete_all_hotkeys">
        delete all hotkeys
    </button>
  </div>

  <script src="options.js"></script>
</body>

</html>